<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-0"
    ></u-loading-page>
    <!--设备管理-->
    <u-navbar
      title="设备管理"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="isEdit = !isEdit"
      :placeholder="true"
      :autoBack="true"
    >
      <view
        slot="right"
        class="text-sm text-dark"
        v-if="deviceList.length > 0"
        >{{ isEdit ? '编辑' : '完成' }}</view
      >
    </u-navbar>
    <view class="mx-4" v-if="deviceList.length > 0">
      <view
        class="mt-3 bg-gray rounded py-1.5 relative"
        v-for="(item, index) in deviceList"
        :key="item.id"
      >
        <view
          class="absolute -right-1 -top-1.5"
          @click="delConfirm(item)"
          v-if="!isEdit"
        >
          <u-icon
            name="minus-circle-fill"
            color="#FF2B2B"
            size="36rpx"
          ></u-icon>
        </view>
        <view class="mx-3">
          <view class="flex items-center w-full">
            <view class="w-3/4 flex flex-col"
              ><view class="text-sm text-dark truncate leading-6 w-full"
                >最近一次登录时间</view
              ><view class="text-xs text-light leading-5">{{
                item.createTime
              }}</view></view
            >
            <view class="w-1/4 flex justify-center items-center">
              <view
                class="bg-green w-1 h-1 rounded-full mr-1.5"
                v-if="item.status == 1"
              ></view
              ><view class="bg-medium w-1 h-1 rounded-full mr-1.5" v-else></view
              ><text
                class="text-sm"
                :class="item.status == 1 ? 'text-dark' : 'text-light'"
                >{{ item.status == 1 ? '在线' : '离线' }}</text
              >
            </view>
            <!-- <view class="w-1/4 text-small text-center text-dark"
              >IP：{{ item.loginArea }}</view
            > -->
          </view>
        </view>
      </view>
    </view>
    <b-empty :marginTop="220" v-else></b-empty>
    <!--确认弹窗-->
    <u-modal
      :show="isShow"
      @confirm="delDevice"
      @cancel="isShow = false"
      @close="isShow = false"
      ref="uModal"
      title="确认删除设备？"
      confirmColor="#FF2B2B"
      confirmText="删除"
      :showCancelButton="true"
      :closeOnClickOverlay="true"
    >
      <view class="slot-content">
        <view class="text-sm text-center leading-10">下次登录需要短信验证</view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { loginOut } from '../../../package-user/services/user-details';
import { delClients, getClientsList } from '../../services/account';

export default {
  data() {
    return {
      isEdit: true,
      isShow: false,
      isLoading: true,
      curId: '',
      statusCur: 0,
      deviceList: [],
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
    }),
  },
  async created() {
    this._getClientsList();
  },
  methods: {
    //删除设备
    async delConfirm(item) {
      this.curId = item.id;
      this.statusCur = item.status;
      this.isShow = true;
    },
    async delDevice() {
      try {
        const { code, data } = await delClients({ recordId: this.curId });
        if (code != 200) return;
        uni.$u.toast('操作成功');
        this.isShow = false;
        //判断是否在线设备 => 是的话退出登录
        if (this.statusCur === 1) {
          const { code, data } = await loginOut();
          if (code != 200) return;
          uni.removeStorageSync('token');
          uni.removeStorageSync('expireAt');
          //this.$store.commit('setUser', {});
          this.$Router.replaceAll({
            name: 'login',
          });
        }
        //刷新设备列表
        this._getClientsList();
      } catch (error) {
        console.error(error);
      }
    },
    //设备列表
    async _getClientsList() {
      const { code, data } = await getClientsList();
      if (code != 200) return;
      this.isLoading = false;
      this.deviceList = data;
    },
  },
};
</script>

<style></style>
